import { BASE_URL } from "@/config";
import { Product } from "@/models/product/dto";
import { Card, Button, Typography, Row, Col } from "antd";
import moment from "moment";
import React, { ReactElement } from "react";
import { Link } from "react-router-dom";
const { Meta } = Card;
const { Title, Paragraph } = Typography;
interface Props {
  product: Product;
}

export default function ProductItem({ product }: Props): ReactElement {
  return (
    <Card
      cover={
        <img
          alt={product.name}
          src={`${BASE_URL}/product/photo/${product._id}`}
        />
      }
      actions={[
        <Button type="link">
          <Link to="">查看详情</Link>
        </Button>,
        <Button type="link">
          <Link to="">加入购物车</Link>
        </Button>,
      ]}
    >
      <Title level={5}>{product.name}</Title>
      <Paragraph ellipsis={{ rows: 2 }}>{product.description}</Paragraph>
      <Row>
        <Col span={12}>销量:{product.sold}</Col>
        <Col span={12} style={{ textAlign: "right" }}>
          价格:{product.price}
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          上架时间:{moment(product.createdAt).format("YYYY-MM-DD")}
        </Col>
        <Col span={12} style={{ textAlign: "right" }}>
          所属分类:{product.category.name}
        </Col>
      </Row>
    </Card>
  );
}
